import React, { memo, useMemo } from 'react';
import Animated from 'react-native-reanimated';
import { styles } from './styles';
import type { AdaptiveSheetDefaultHandleProps } from './types';

const AdaptiveSheetHandleComponent = ({ style, indicatorStyle: _indicatorStyle, children }: AdaptiveSheetDefaultHandleProps): JSX.Element => {
  // styles
  const containerStyle = useMemo(() => [styles.container, ...[Array.isArray(style) ? style : [style]]], [style]);
  const indicatorStyle = useMemo(() => [styles.indicator, ...[Array.isArray(_indicatorStyle) ? _indicatorStyle : [_indicatorStyle]]], [_indicatorStyle]);

  return (
    <Animated.View style={containerStyle}>
      <Animated.View style={indicatorStyle} />
      {children}
    </Animated.View>
  );
};

const AdaptiveSheetHandle = memo(AdaptiveSheetHandleComponent);
AdaptiveSheetHandle.displayName = 'AdaptiveSheetHandle';

export default AdaptiveSheetHandle;
